<template>
	<view class="menus-list">
		<!-- v-if="type === 'double'" -->
		<view class="menus-double row-between">
			<navigator v-for="(item, index) in list" :key="index" class="item bg-gray mt20" hover-class="none">
				<view class="menus-img" style="width: 347rpx;height:347rpx;">
					<custom-image :lazy-load="true" width="322rpx" height="322rpx" radius="12rpx" lazy-load
						:src="item.mealPic"></custom-image>
				</view>
				<view class="menus-info">
					<view class="menus-name line2">{{item.mealName}}</view>
					<view class="xs muted mb20 mt5 line2">{{item.mealDescribe}}</view>
					<view class="price mt10 row">
						<price-format color="#FF6600" class="mr10" :first-size="32" :second-size="24"
							:subscript-size="26" :price="item.actualAmount" :weight="600"></price-format>
						<price-format class="muted" :firstSize="24" :secondSize="24" :subscript-size="24" line-through
							:price="item.price" :weight="600"></price-format>
					</view>
					<view class="row-between number-box">
						<u-number-box disabled-input="true" v-model="item.value"
							:max="(item.stock &&item.status) ? item.stock : 1"
							@change="({value})=>onChangeVal(item,value)" size="30" input-width="193">
						</u-number-box>
					</view>
				</view>
				<view class="is-out-wrap" v-if="!item.status || !item.stock" />
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'double'
			},
			list: {
				type: Array,
				default: () => []
			},
			isBargain: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: 0
			};
		},
		methods: {
			onChangeVal(menus, quantity) {
				menus.quantity = quantity
				// 计算选择菜品的总价
				menus.total = quantity * menus.actualAmount
				menus.actualPrice = quantity * menus.price
				this.$emit('setOrderList', menus)

			}
		},
	}
</script>

<style lang="scss" scopeds>
	.menus-list {
		.menus-double {
			flex-wrap: wrap;
			padding: 0 20rpx;
			align-items: stretch;

			.menus-name {
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1E1E1E;
			}

			.muted {
				font-size: 20rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #727272;
			}

			.price {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF6600;
				line-height: 44rpx;
			}

			.item {
				position: relative;
				width: 347rpx;
				border-radius: 10rpx;
				overflow: hidden;

				.menus-info {
					padding: 12rpx;
				}

				.is-out-wrap {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: url('/static/images/flowers.png') no-repeat center/65%;
					background-color: rgba(0, 0, 0, .5);
					border-radius: 10rpx;
				}
			}
		}

	}
</style>
